iT邦幫忙

2025 iThome 鐵人賽

DAY 3
0
自我挑戰組

給愛追劇的你:30天互動網站挑戰系列 第 3

Day 03:完成首頁骨架(標題、導覽列、主內容區塊)

  • 分享至 

  • xImage
  •  

昨天我們完成了網站功能的規劃與草圖設計,今天就來動手把專案的骨架先搭好!雖然今天的進度看起來很簡單,但這一步非常重要,因為一個乾淨的檔案結構可以讓後續的開發更有條理,也方便維護。


1.建立 Header(網站抬頭與導覽)

在 index.html 的 裡,建立網站標題與導覽列,統一入口與頁面導向,後續才好加其他頁(收藏、心得)。
https://ithelp.ithome.com.tw/upload/images/20250917/20170068dTlp98Z38a.png


2.新增 Hero/開場文案

在 中放一句開場文案與「瞭解更多」連結,讓使用者一進站知道網站用途,並引導到互動區。
https://ithelp.ithome.com.tw/upload/images/20250917/20170068DPWC1SKrHi.png


3.放入「篩選按鈕」與「清單容器」

加上四個類型按鈕與一個空容器,之後會用 JS 填內容,先把版位占好,之後再加互動。
https://ithelp.ithome.com.tw/upload/images/20250917/2017006846ZRa9SEju.png


完整程式碼:

https://ithelp.ithome.com.tw/upload/images/20250917/20170068zYXav48MLA.pnghttps://ithelp.ithome.com.tw/upload/images/20250917/201700689XxGqdomDy.png


上一篇
Day 02:建立專案資料夾
系列文
給愛追劇的你:30天互動網站挑戰3
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言